<template>
  <div class="clock">
    <ul class="line-min">
      <li
        v-for="index in 60"
        :key="index"
        :style="{
          transform:
            'rotate(' + (360 / 60) * index + 'deg) translate(85px,50%)',
        }"
      />
    </ul>
    <ul class="line-hour">
      <li
        v-for="index in 12"
        :key="index"
        :style="{
          transform:
            'rotate(' + (360 / 12) * index + 'deg) translate(80px,50%)',
        }"
      />
    </ul>
    <ol
      class="clocknum"
      ref="clocknum"
    >
      <li
        v-for="i in 12"
        :key="i"
        :style="{
          left:
            clocknumWidth *
            (1 + Math.cos(((2 * Math.PI) / 360) * (i * 30 - 90))) +
            'px',
          top:
            clocknumWidth *
            (1 + Math.sin(((2 * Math.PI) / 360) * (i * 30 - 90))) +
            'px',
        }"
      >
        {{ i }}
      </li>
    </ol>
    <ul class="point">
      <li
        class="hour"
        :style="{transform: 'rotate(' + deghour + 'deg)'}"
      />
      <li
        class="min"
        :style="{transform: 'rotate(' + degmin + 'deg)'}"
      />
      <li
        class="sec"
        :style="{transform: 'rotate(' + degsec + 'deg)'}"
      />
      <li class="circle" />
    </ul>
  </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, ref } from 'vue'

export default defineComponent({
  setup () {
    const clocknum = ref()
    const clocknumWidth = ref(0)
    const degsec = ref(0)
    const degmin = ref(0)
    const deghour = ref(0)
    onMounted(async () => {
      await nextTick()
      clocknumWidth.value = clocknum.value.offsetWidth / 2
      setInterval(drawpoint, 1000)
    })
    const drawpoint = () => {
      const time = new Date()
      const sec = time.getSeconds()
      const min = time.getMinutes()
      const hour = time.getHours()
      const subsec = (360 / 60)// 秒针1s旋转6度
      const submin = (360 / 3600)// 分针1s旋转0.1度
      const subhour = (360 / 12 / 3600)// 时针1s旋转360/12/3600度

      degsec.value = (subsec * sec - 90) % 360// (6*s-90)%360
      degmin.value = (submin * (min * 60 + sec) - 90) % 360 // (0.1*(m*60+s)-90)360%
      deghour.value = (subhour * (hour * 3600 + min * 60 + sec) - 90) % 360 // 防止超过360度的情况
      degsec.value += (360 / 60)
      degmin.value += (360 / 3600)
      deghour.value += (360 / 12 / 3600)
      if (degsec.value >= 360) {
        degsec.value = 0
      }
      if (degmin.value >= 360) {
        degmin.value = 0
      }
      if (deghour.value >= 360) {
        deghour.value = 0
      }
    }
    return {
      clocknum,
      clocknumWidth,
      degsec,
      degmin,
      deghour
    }
  }
})
</script>
<style lang="scss" scoped>
.clock {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  background: #292a38;
  border-radius: 50%;
  position: relative;
}
/*表盘数字*/
.clocknum {
  position: relative;
  width: 150px;
  height: 150px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  li {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 15px;
    transform: translate(-50%, -50%);
    color: #fff;
    transform-origin: left center;
  }
}
/*刻度*/
.line-hour li,
.line-min li {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  transform-origin: left center;
  /*transform-origin设置旋转元素的基点位置
    * transform前li的左侧顶点是时钟的中心
    * 如果不设置transform-origin 默认是center center 则是以偏移前li的中心点而非左侧顶点进行旋转。整个表盘会偏移
*/
}
.line-hour li {
  width: 10px;
  height: 2px;
}
.line-min li {
  width: 5px;
  height: 2px;
}
/*指针*/
.point li {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  transform-origin: left center;
  &.circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  &.hour {
    width: 45px;
    height: 3px;
    margin-top: -1;
  }
  &.min {
    width: 60px;
    height: 2px;
    margin-top: -1;
  }
  &.sec {
    width: 80px;
    height: 1px;
    margin-top: -1;
  }
}
</style>
